<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="/Public/Admin/styles/xiaomi-goods.css"/>
    <script src="/Public/Home/js/jquery-1.11.0.js"  type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="outside">
    分类：<select name="fen" id="fen">
    <for start="1" end="18">
        <option>{$i}</option>
    </for>
           </select>
    <table>
        <thead>
        <tr>
            <td>ID</td>
            <td>商品名字</td>
            <td>商品描述</td>
            <td>商品版本</td>
            <td>商品颜色</td>
            <td>商品单价</td>
            <td>操作</td>
        </tr>
        </thead>
        <tbody id="newdata">

        </tbody>
    </table>
    {$page}
</div>
</body>
</html>
<script src="//cdn.bootcss.com/juicer/0.6.14/juicer-min.js"></script>
<script id="tpl" type="text/template">
    {@each datas as data}
    <tr>
        <td>${data.id}</td>
        <td>${data.name}</td>
        <td>${data.content}</td>
        <td>${data.edition}</td>
        <td>${data.color}</td>
        <td>${data.price}</td>
        <td>
            <a href='${data.url}'>上架</a>
        </td>
    </tr>
    {@/each}
</script>
<script type="text/javascript">
    $(function() {
        $('#fen').change(function(){
            var objectModel = {};
            var   value = $(this).val();
            var   type = $(this).attr('id');
            objectModel[type] =value;
            getGoods(objectModel);
        });
        function getGoods(objectModel) {
            $.ajax({
                cache:false,
                type:"POST",
                url:"{:U('Index/inGoodsFenAjax')}",
                dataType:"json",
                data:objectModel,
                timeout:30000,
                error:function(){
                    alert("error");
                },
                success:function(datas){
                    var tpl = document.getElementById('tpl').innerHTML;
                    var a =juicer(tpl, {
                        datas: datas
                    });
                    document.getElementById('newdata').innerHTML = a;
                }
            });
        }
        getGoods({
            fen: 1
        });
    });


</script>